<template>
	<div class="bg">
		<loading v-show='!show'></loading>
		<div>
			<h3>{{$t('home.sysLabel')}}</h3>
			<button @click="goDetail" class="small-btn button button--aylen" >{{$t('home.detailBtn')}}</button>
		</div>
		<transition name='fade'>
		<div v-show='show'>
		<div>
			<div class="cpu">
				<canvas id="cpu" width="150" height="82">您的浏览器不支持canvas元素,请下载新的浏览器</canvas>
				<p class="pic-label">{{$t('home.picLable1')}}</p>
			</div>
			<div class="memory">
				<canvas id="memory" width="150" height="82">您的浏览器不支持canvas元素,请下载新的浏览器</canvas>
				<p class="pic-label">{{$t('home.picLabel2')}}</p>
			</div>
		</div>
		<div>
			<table>
				<tr>
					<td>{{$t('home.tableLabel1')}}</td><td>{{acrt.model ? acrt.model : '-'}}</td>
					<td>{{$t('home.tableLabel2')}}</td><td>{{sys_state.version ? sys_state.version : '-'}}</td>
				</tr>
				<tr>
					<td>{{$t('home.tableLabel3')}}</td><td>{{sys_state.online_node ? sys_state.online_node : '-'}}</td>	
					<td>{{$t('home.tableLabel4')}}</td><td>{{formatTime(sys_state.start) ? formatTime(sys_state.start) : '-'}}</td>
				</tr>
				<tr>		
					<td v-html="$t('home.tableLabel5')"></td><td>{{acrt.device_id ? acrt.device_id : '-'}}</td>			
					<td>{{$t('home.tableLabel6')}}</td><td>{{nowtime ? nowtime : '-'}}</td>				
				</tr>
			</table>
		</div>	
		</div>
		</transition>
	
	</div>
</template>
<script>
import loading from 'components/common/loading'
export default {
	components:{
		loading
	},
	data() {
		return{
			nodenum:'',
			runtime:'',
			serialNum:'',
			nowtime: '00:00:00',
			sys_version: '0.0',
			hw_ver: '0',
			intervalid: null,
			timeId: null
		}
	},
	computed:{
		acrt:function() {
			return this.$store.state.cert
		}
	},
	props:{
		sys_state:{
			type:Object,
			required:true
		},
		show:{
			type:Boolean,
			required:true
		}
	},
	methods: {
		formatTime(time) {
			// let now = (new Date()).getTime()
			// let time = Math.ceil((now - Date.parse(date))/1000)
			if (time < 60) {
				return time + this.$t('home.seconds')
			}
			if (time >= 60 && time < 3600) {
				return Math.floor(time/60) + this.$t('home.minutes') + (time % 60) + this.$t('home.seconds')
			}
			if (time >= 3600 && time < 24*3600) {
				return Math.floor(time/3600) + this.$t('home.hours') + Math.floor(time%3600/60) + this.$t('home.minutes')
			}
			if (time >= 24*3600) {
				return Math.floor(time/24/3600) + this.$t('home.days') + Math.floor(time%86400/3600) + this.$t('home.hours')
			}
		},
		drawMeter(el,val,stroke) {
			let deg = 11*Math.PI/9/100
			let ctx = el.getContext('2d')
			ctx.clearRect(0,0,el.width,el.height)
			ctx.save()
			ctx.font = "normal normal 900 50px 宋体,微软雅黑"
			ctx.fillStyle = stroke
			if (val < 10) {
				ctx.fillText(val,63,80)
			} else if ( val < 100) {
				ctx.fillText(val,50,80)
			} else {
				ctx.fillText(val,37,80)
			}
			ctx.restore()

			ctx.save()
			ctx.beginPath()
			ctx.lineWidth = 10
			ctx.strokeStyle = stroke
			ctx.arc(75,75,70,8/9*Math.PI,8/9*Math.PI + val*deg)
			ctx.stroke()
			ctx.restore()
		},
		goDetail() {
			this.$router.push('/current')
		}
	},
	watch: {
		sys_state:function(val) {
			let cpu_color = ''
			let	memory_color =''
			if (this.themeColor=="red") {
				cpu_color = '#eb5940'
				memory_color ="#feae00"
			} else if (this.themeColor=="blue") {
				cpu_color = '#6a9cf8'
				memory_color ="#56ba89"
			}
			
			let cpuEl = document.getElementById("cpu")
			this.drawMeter(cpuEl,Math.ceil(val.cpu * 100),cpu_color)
			let memEl = document.getElementById("memory")
			this.drawMeter(memEl,Math.ceil(val.memory*100),memory_color)
			this.nowtime=val.time.split(' ')[1]
		}
	}
}
</script>
<style scoped lang="less">
	.bg {
		background: #FFFFFF;
		height: 340px;
		padding: 5px 28px;
		margin-top: 20px;
	}
	
	h3 {
		height: 30px;
		line-height: 30px;
		display: inline-block;
		font-size: 14px;
	}
	
	.button {
		float: right;
		margin-top: 10px;
	}
	
	.cpu,
	.memory {
		display: inline-block;
		width: 150px;
		height: 100px;
		background: url(../../../img/dial.png) no-repeat;
		background-size: contain;
		margin-left: 20px;
		margin-top: 30px;
	}
	
	.memory {
		margin-left: 90px;
	}
	.pic-label{
		margin-top:10px;
		text-align: center; 
	}
	/*基本信息*/
	table{
		border: 1px solid #eeeeee;	
	  padding:5px 10px;	
		margin-top: 20px;
		tr{
			height: 30px;
		}
		tr td:nth-child(even) {
			text-align: left;
			padding-left: 5px;
			border-left: none;
		}
		tr td:nth-child(odd) {
			text-align: right;
			padding-right: 5px;
		
		}
	}
	

</style>